import { myrequest } from "../../request/index"
Page({
  data: {
    // 左侧的菜单数据
    leftMenuList: [],
    // 右侧的商品数据
    rightContent: [],
    currentIndex: 0,
    // 右侧内容滚动条距离顶部的距离
    top: 0
  },
  // 存储所有的分类数据
  Cates: [],
  onLoad: function (options) {
    // 0 web中的本地存储和小程序中的本地存储的区别
      // 1 写代码的方式不一样
      //   web：localStorage.setItem("key", "value") localStorage.getItem("key")
      // 小程序：wx.setStorageSync("key", "value") wx.getStorageSync("key")
      // 2 存的时候 没有做类型转换
      //    web：不管存入的是什么类型的数据，最终都会调用toString()，把数据存为字符串，在存进去
      //  小程序：不存在类型转换的操作 
    // 1 使用本地存储数据 {time: Date.now(), data: [...]}
    // 2 判断本地是否有数据 如果没有旧的数据 直接发送新的网络请求
    // 3 如果有旧的数据 就从本地存储中拿取数据即可

    // 获取本地存储中的数据
    const Cates = wx.getStorageSync("cates")
    // 判断
    if (!Cates) {
      this.getCate()
    } else {
      // 有旧的数据 定义过期时间
      if (Date.now() - Cates.time >= 1000 * 10) {
        this.getCate()
      }
      this.Cates = Cates.data
      // 构造左侧的大菜单数据
      let leftMenuList = this.Cates.map(v => v.cat_name)
      // 构造右侧的商品数据
      let rightContent = this.Cates[0].children
      this.setData({
        leftMenuList,
        rightContent
      })
    }
  },
  // 请求分类的所有数据
  async getCate() {
    const { data: res } = await myrequest({
      url: "/categories"
    })
    this.Cates = res.message
    wx.setStorageSync("cates", {time: Date.now(), data: this.Cates})
    console.log(this.Cates)
    // 构造左侧的大菜单数据
    let leftMenuList = this.Cates.map(v => v.cat_name)
    // 构造右侧的商品数据
    let rightContent = this.Cates[0].children
    this.setData({
      leftMenuList,
      rightContent
    })
  },
  // 点击左侧侧边栏，刷新界面
  handleItemTap(e) {
    const {index} = e.currentTarget.dataset
    // 根据index值的变化，更新右侧的商品数据
    let rightContent = this.Cates[index].children
    this.setData({
      currentIndex: index,
      rightContent,
      top: 0
    })
  }
})